<template>
	<view class="lifepay">
		<view class="lifepay-title">
			我的缴费
		</view>
		<view class="">
			<view class="items" @click="goCity">
				<view class="" style="display: flex;align-items: center;">
					<view class="left">
					</view>
					<view class="right">
						<view class="">
							电费
						</view>
						<view class="tel">
							0709029009 156****7800
						</view>
					</view>
				</view>
				<view class="">
					<image src="../../../../static/icons/右箭头 (1).png" mode="" style="width: 40rpx;height:40rpx"></image>
				</view>
			</view>
			<view class="items" @click="gopropertypay">
				<view class="" style="display: flex;align-items: center;">
					<view class="left">
					</view>
					<view class="right">
						<view class="" style="display: flex;align-items: center;">
							<view class="">
								物业费
							</view>
							<view class="Btns">
								欠费
							</view>
						</view>
						<view class="tel">
							南航碧桂园小区01栋5单元401 江枫
						</view>
					</view>
				</view>
				<view class="">
					<image src="../../../../static/icons/右箭头 (1).png" mode="" style="width: 40rpx;height:40rpx"></image>
				</view>
			</view>
		</view>
		<view class="addpays">
			<view class="title">
				新增缴费
			</view>
			<view class="addpays-items" style="display: flex;flex-wrap: wrap;justify-content: space-between;">
				<view class="items" v-for="item in list" :key="item" @click="goaddPay">
					<view class="" style="display: flex;align-items: center;">
						<view class="left">
						</view>
						<view class="right">
							<view class="">
								{{item}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	let list = ['物业费', '电费', '水费', '燃气费', '宽带费', '暖气费', '车位费']
	const goCity = () => {
		uni.navigateTo({
			url: '/pages/server/views/CtrCity/CtrCity'
		})
	}
	const gopropertypay = () => {
		uni.navigateTo({
			url: '/pages/server/views/PropertyPay/PropertyPay'
		})
	}
	const goaddPay = () => {
		uni.navigateTo({
			url: '/pages/server/views/AddLifePay/AddLifePay'
		})
	}
</script>

<style lang="scss">
	.lifepay {
		height: 100vh;
		background-color: #fcfcfc;
		padding: 30rpx;
		margin-bottom: 30rpx;

		.items {
			background-color: white;
			border: 2rpx solid #f2f2f2;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.left {
				width: 64rpx;
				height: 64rpx;
				background-color: #e6f1ff;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.tel {
				color: #9a9a9a;
				font-size: 26rpx;
			}

			.right {
				line-height: 60rpx;

				.Btns {
					height: 46rpx;
					line-height: 46rpx;
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #f46363;
					background-color: #fde0e0;
					padding: 0rpx 15rpx;
					border-radius: 12rpx;
				}
			}
		}
	}

	.addpays {
		.title {
			margin: 30rpx 0rpx;
		}

		.items {
			display: flex;
		}

		.addpays-items {
			.items {
				width: calc(50% - 62rpx - 14rpx);
			}
		}
	}
</style>